<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getMy } from '@/api/user'
import type { MyPageInfo } from '@/api/user/type'
import type { BaseResponse } from '@/api/base'
import { AuthStatus, AuthStatusTag } from './common'
import store from '@/store'

const userInfo = ref<MyPageInfo>()

const loadMy = async () => {
  const res: BaseResponse = await getMy()
  userInfo.value = res.data
}

onShow(async () => {
  userInfo.value = {}
  await loadMy()
})

const jumpToMyInfo = () => {
  uni.navigateTo({
    url: '/pages/my/userInfo'
  })
}
const jumpToWallet = () => {
  uni.navigateTo({
    url: '/pages/wallet/index'
  })
}
const jumpToWalletRecord = () => {
  uni.navigateTo({
    url: '/pages/wallet/record?freeze=1'
  })
}
const clickLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: async (res: any) => {
      if (res.confirm) {
        await store.dispatch('Logout')
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }
    }
  })
}
</script>

<template>
  <view class="my">
    <view class="my-user-info">
      <view class="userinfo-left">
        <my-avatar size='60' class="userinfo-avatar" :src="userInfo?.avatar"></my-avatar>
      </view>
      <view class="userinfo-right">
        <uv-text :bold='true' :text="userInfo?.nickname" size="18"></uv-text>
        <uv-tags size="mini" :text="AuthStatus[userInfo?.authStatus]"
          :type="AuthStatusTag[userInfo?.authStatus]"></uv-tags>
      </view>
      <view class="userinfo-action">
        <uv-icon name="arrow-right" @click="jumpToMyInfo" size="18" color="#999"></uv-icon>
      </view>
    </view>
    <!-- 新增独立余额模块 -->
    <view class="my-balance">
      <view class="balance-item" @click="jumpToWallet">
        <uv-text text="可用余额" size="12" color="#999"></uv-text>
        <uv-text mode="price" :text="userInfo?.balance || 0.00" size="18" color="#ff5722"></uv-text>
      </view>
      <view class="balance-divider"></view>
      <view class="balance-item" @click="jumpToWalletRecord">
        <uv-text text="冻结余额" size="12" color="#999"></uv-text>
        <uv-text mode="price" :text="userInfo?.frozenAmount || 0.00" size="16" color="#666"></uv-text>
      </view>
    </view>
    <uv-list class="my-menu-list">
      <uv-list-item title="我的商品" link to="/pages/goods/indexMe"></uv-list-item>
      <uv-list-item title="我的订单" link to="/pages/order/index"></uv-list-item>
      <uv-list-item title="快递代取" link to="/pages/express/my"></uv-list-item>
      <uv-list-item title="我的沸点" link to="/pages/complaint/my"></uv-list-item>
      <uv-list-item title="我的兼职" link to="/pages/partTimeJob/my"></uv-list-item>
    </uv-list>
    <uv-button text="退出登录" @click="clickLogout"></uv-button>
  </view>
</template>

<style lang="scss" scoped>
.my {

  .my-user-info {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    padding: 20rpx;
    background: #fff;


    .userinfo-right {
      display: flex;
      height: 60px;
      margin-left: 20rpx;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
    }

    .userinfo-action {
      margin-left: auto;
      display: flex;
      align-items: center;
      color: #999;
      font-size: 24rpx;
    }
  }

  .my-balance {
    margin-bottom: 10rpx;
    display: flex;
    background: #fff;
    padding: 20rpx;

    .balance-item {
      flex: 1;
      display: flex;
      flex-direction: column;

      ::v-deep .uv-text {
        justify-content: center !important;
      }
    }

    .balance-divider {
      width: 2rpx;
      background: #eee;
      margin: 0 20rpx;
      height: 60rpx;
      align-self: center;
    }
  }
}
</style>
